<template>
	<view>
		<!-- <view class="search">
			<u--input v-model="searchValue" placeholder="请输入关键字" :clearable="true" prefixIcon="search"
				prefixIconStyle="font-size: 22px;color: #909399" @clear="clear">
				<template slot="suffix">
					<view class="search_btn" @click="fetchData"> 搜索</view>
				</template></u--input>
		</view> -->
		<view class="search">
			<uni-search-bar v-model="searchValue" style="flex: 1" radius="5" placeholder="请输入关键词"
				clearButton="auto" cancelButton="none" @confirm="search" @clear="clear" />
			<image src="@/static/img/icon_filt_black.png" class="search-img" @tap="showPopup"></image>
		</view>
		<view style="padding-top: 10rpx;">
			<!-- <view class="afim_main" v-for="(item, i) in dataList" :key="i" @click="onClickItem(item)">
				<view class="img-box">
					<text class="tip-text-blue postion">{{ item.typeStr }}</text>
					<image class="list-img" src="@/static/img/default.png" v-if="!item.pics"></image>
					<image class="list-img" :src="fileUrl + item.pics" v-if="!item.pics"></image>
				</view>

				<view class="afim_le">
					<view class="afim_list">
						<label>检修设备:</label>
						<text>{{ item.deviceName }}</text>
					</view>
					<view class="afim_list">
						<label>检修票号:</label>
						<text>{{ item.overhaulNo }}</text>
					</view>
					<view class="afim_list">
						<label>申请人员:</label>
						<text>{{ item.createUserName }}</text>
					</view>
					<view class="afim_list">
						<label>申请部门:</label>
						<text>{{ item.applyDeptName }}</text>
					</view>
					<view class="afim_list">
						<label>申请时间:</label>
						<text>{{ item.createDate }}</text>
					</view>
				</view>
			</view> -->
			<div class="box" v-for="(item, i) in dataList" :key="i" @click="onClickItem(item)">
				<div class="box_left">
					<div class="box_item">
						<div class="lable"> 检修设备:</div>
						<div class="value">{{item.deviceName}}</div>
					</div>
					<div class="box_item">
						<div class="lable"> 检修票号:</div>
						<div class="value">{{item.overhaulNo}}</div>
					</div>
					<div class="box_item">
						<div class="lable"> 申请人员:</div>
						<div class="value">{{item.createUserName}}</div>
					</div>
					<div class="box_item">
						<div class="lable"> 申请部门:</div>
						<div class="value">{{item.applyDeptName}}</div>
					</div>
					<div class="box_item">
						<div class="lable"> 申请时间</div>
						<div class="value">{{item.createDate}}</div>
					</div>
				</div>
				<div class="box_right">{{item.typeStr}}</div>
			</div>
		</view>
		<empty v-if="dataList.length == 0"></empty>
		<uni-popup id="popup" ref="popup" :type="'bottom'" :animation="true" :maskClick="true">
			<view class="popup-content">
				<view class="popup-title">选择日期</view>
				<view class="popup-date">
					<picker mode="date" :value="startTime" @change="beginDateChange">
						<view class="check-text" v-if="startTime != ''">{{startTime}}</view>
						<view class="check-text" v-else>开始日期</view>
					</picker>
					<view>--</view>
					<picker mode="date" :value="endTime" @change="endDateChange">
						<view class="check-text" v-if="endTime != ''">{{endTime}}</view>
						<view class="check-text" v-else>结束日期</view>
					</picker>
				</view>
				<view class="con_btn">
					<button @click="resetClick()" class="confirm-btn" type="default">
						重置
					</button>
					<button @click="confirmClick()" class="confirm-btn" type="primary">
						确定
					</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		FILE_URL,
		getWaitieProcessList,
		getWaitieProcessDetails
	} from '@/api/maintenance/selfs.js'
	import Empty from '@/components/selfs/Empty.vue'
	import urlConfig from "@/request/urlConfig.js"; 
	export default {
		components: {
			Empty
		},
		data() {
			return {
				userName: '',
				userId: '',
				deptName: '',
				deptId: '',
				tabs: ['未审核', '已审核'],
				current: 0,
				dataList: [],
				fileUrl: FILE_URL,
				searchValue: '',
				// <button @click="jumpTos('/pages/maintenance/declare')">检修申报</button>
				// <button @click="jumpTos('/pages/maintenance/audit_list')">申报审核</button>
				// <button @click="jumpTos('/pages/maintenance/bidding_list')">竞价任务</button>
				// <button @click="jumpTos('/pages/maintenance/assign_list')">竞价指派</button>
				// <button @click="jumpTos('/pages/maintenance/task_list')">任务指派</button>
				// <button @click="jumpTos('/pages/maintenance/affirm_list')">检修认定</button>
				// <button @click="jumpTos('/pages/maintenance/confirm_list')">检修确认列表</button>
				// <button @click="jumpTos('/pages/maintenance/handle_list')">检修处理列表</button>
				// <button @click="jumpTos('/pages/maintenance/accept_list')">检修验收列表</button>
				// <button @click="jumpTos('/pages/maintenance/final_accept_list')">最终验收列表</button>
				// <button @click="jumpTos('/pages/maintenance/examine_list')">终止审核列表</button>
				// <button @click="jumpTos('/pages/maintenance/stande_list')">检修台账列表</button>
				urlList: {
					1: '/pages/maintenance/audit',
					4: '/pages/maintenance/task',
					5: '/pages/maintenance/affirm',
					6: '/pages/maintenance/confirm',
					7: '/pages/maintenance/handle',
					8: '/pages/maintenance/accept',
					9: '/pages/maintenance/final_accept',
				},
				startTime:'',
				endTime:'',
				baseUrl: urlConfig.nearbyUrl + 'wsd_app_operate_h5/#'
			}
		},
		onPullDownRefresh() {
			this.fetchData()
		},
		
		methods: {
			search({value}){
				this.searchValue = value
				 this.fetchData()
			},
			clear(){
				this.searchValue = ''
				 this.fetchData()
			},
			resetClick() {
				this.startTime = ''
				this.endTime = ''
				this.searchValue = ''
				this.$refs.popup.close();
				this.fetchData();
			},
			confirmClick() {
				this.$refs.popup.close();
				this.fetchData();
			},
			beginDateChange(e) {
				this.startTime = e.detail.value;
			},
			endDateChange(e) {
				this.endTime = e.detail.value;
			},
			
			showPopup() {
				this.$refs.popup.open();
			},
			clear() {
				this.searchValue = ''
				this.fetchData()
			},
			onClickTab(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
					this.fetchData()
				}

			},
			onClickItem(row) {
				let url = this.urlList[row.type]

				console.log(url, '____');
				uni.showLoading({
					title: '正在查询...'
				})
				getWaitieProcessDetails({
					overhaulId: row.overhaulId,
					type: row.type

				}).then(res => {
					console.log(res);
					uni.hideLoading()
					if (row.type == 8 || row.type == 9) {
						// this.jumpTo(url, {
						// 	userName: row.createUserName,
						// 	userId: row.createUser,
						// 	deptName: row.applyDeptName,
						// 	deptId: row.applyDept,
						// 	type: 0,
						// 	overhaul_id: row.overhaulId,
						// 	plan_id: res.datas.plan_id,
						// 	jsonData: JSON.stringify(res.datas)
						// })
						const params = {
						  userName: row.type == 8 || row.type == 9 ? row.userName :  row.createUserName,
						  userId: row.createUser,
						  deptName: row.applyDeptName,
						  deptId: row.applyDept,
						  type: 0,
						  overhaul_id: row.overhaulId,
						  plan_id: res.datas.plan_id,
						  jsonData: JSON.stringify(res.datas),
						  token: uni.getStorageSync('token')
						};
						const queryString = new URLSearchParams(params).toString();
						window.open(`${this.baseUrl}${url}?${queryString}`, "_blank");
					} else {
						const params = { 
							userName: row.type ==5  || row.type == 6 || row.type == 7 ? res.datas.major_user_name  : row.type ==1? row.userName: row.createUserName,
							userId: row.createUser,
							deptName: row.applyDeptName,
							deptId: row.applyDept,
							type: 0,
							jsonData: JSON.stringify(res.datas),
							token: uni.getStorageSync('token')
						};
						const queryString = new URLSearchParams(params).toString();
						window.open(`${this.baseUrl}${url}?${queryString}`, "_blank");
						// this.jumpTo(url, {
						// 	userName: row.createUserName,
						// 	userId: row.createUser,
						// 	deptName: row.applyDeptName,
						// 	deptId: row.applyDept,
						// 	type: 0,
						// 	jsonData: JSON.stringify(res.datas)
						// })
					}

				}).catch(err => {
					console.log(err);
					uni.hideLoading()
				})

				// if (this.current == 0) {
				// 	uni.navigateTo({
				// 		url: './audit?type=0&userId=' + this.userId + '&userName=' + this.userName +
				// 			'&deptId=' + this.deptId + '&deptName=' + this.deptName + '&jsonData=' +
				// 			JSON.stringify(item)
				// 	})
				// } else {
				// 	uni.navigateTo({
				// 		url: './audit?type=1&userId=' + this.userId + '&userName=' + this.userName +
				// 			'&deptId=' + this.deptId + '&deptName=' + this.deptName + '&jsonData=' +
				// 			JSON.stringify(item)
				// 	})
				// }
			},
			fetchData() {
				let params = {
					PAGE_SIZE: 100000,
					PAGE_NO: 1,
					name: this.searchValue,
					startTime:this.startTime,
					endTime:this.endTime,
					t:new Date().getTime(),
				}

				uni.showLoading({
					title: '正在查询...'
				})
				getWaitieProcessList(params).then(res => {
					console.log("audit", res.rows)
					this.dataList = res.rows
				})
				uni.stopPullDownRefresh() 
			}
		},
		onLoad: function(e) {
			this.userName = e.userName
			this.userId = e.userId
			this.deptName = e.deptName
			this.deptId = e.deptId
			// this.fetchData()
		},
		onShow() {
			this.fetchData()
		},
		// created: function() {
		// 	// 订阅详情页回传值的监听
		// 	uni.$on("audit_refresh", (val) => {

		// 	})
		// },
		// beforeDestroy: function() {
		// 	uni.$off('audit_refresh')
		// },
	}
</script>

<style>
	page {
		background: #F4F4F4;
	}
</style>
<style scoped lang="scss">
	.popup-content {
		background-color: #ffffff;
		width: 100%;
		padding: 20rpx;
	}

	.popup-title {
		color: #1b1b1b;
		font-size: 36rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		font-weight: bold;
	}

	.popup-date {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border: 1px solid #dcdfe6;
		border-radius: 8rpx;
		min-height: 80rpx;
	}

	.check-text {
		font-size: 34rpx;
	}

	.con_btn {
		width: 100%;
		margin-top: 60rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.confirm-btn {
		flex: auto;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.con_btn {
		width: 100%;
		margin-top: 60rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.confirm-btn {
		flex: auto;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.search {
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.search-img {
		width: 40rpx;
		height: 40rpx;
		margin: 0 25rpx;
	}

	// .search {

	// 	/deep/.u-input {
	// 		width: 688rpx;
	// 		height: 65rpx;
	// 		background: #FFFFFF;
	// 		border: 1rpx solid #CCCCCC;
	// 		margin: 0 auto;
	// 		margin-top: 15rpx;
	// 		border-radius: 32rpx;
	// 	}

	// 	&_btn {
	// 		font-family: PingFangSC, PingFang SC;
	// 		font-weight: 400;
	// 		font-size: 29rpx;
	// 		color: #666666;
	// 		padding-left: 10rpx;
	// 		border-left: 1rpx solid #E0E0E0;
	// 	}
	// }



	.ware_main {
		width: 100%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #ffffff;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}

	.ware_le {
		width: 100%;
	}

	.afim_main {
		margin: 15upx;
		display: flex;
		justify-content: center;
		background: #FFFFFF;
		border-bottom: 1upx solid #F4F4F4;
		padding: 10upx;
		border-radius: 10upx;
	}

	.afim_le {
		/* width: 70%; */
		flex: 1 auto;
	}

	.afim_list {
		margin: 0upx auto;
	}

	.afim_le label {
		color: #267DFF;
		font-size: 30upx;
	}

	.afim_le text {
		font-size: 30upx;
		padding-left: 20upx;
	}

	.afim_ri text {
		border: 2upx solid #267DFF;
		color: #267DFF;
		padding: 3upx 16upx;
		border-radius: 10upx;
		font-size: 30upx;
	}

	.afim_ri text:active {
		background: #267DFF;
		color: #FFFFFF;
	}

	.img-box {
		flex: 0 0 auto;
		width: 170rpx;
		height: 170rpx;
		padding: 15rpx;
		position: relative;
	}

	.list-img {
		width: 100%;
		height: 100%;

	}

	.tip-text-blue {
		font-size: 28rpx;
		background-color: #007AFF;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 2rpx;
	}

	.tip-text-red {
		font-size: 28rpx;
		background-color: #ff0000;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 2rpx;
	}

	.tip-text-green {
		font-size: 28rpx;
		background-color: #00cf00;
		color: #fff;
		padding: 5rpx 10rpx;
		border-radius: 2rpx;
	}

	.postion {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9999;
	}

	.box {
		margin: 15upx;
		display: flex;
		background: #FFFFFF;
		border-bottom: 1upx solid #F4F4F4;
		padding: 15upx;
		border-radius: 10upx;
		align-items: center;
		justify-content: space-between;

		&_right {
			border: 2rpx solid #058cf5;
			padding: 0 14rpx;
			border-radius: 10rpx;
			background-color: #f1f4ff;
			color: #058cf5;
			font-size: 28rpx;
			flex: 0 0 auto;
		}

		&_item {
			display: flex;
			line-height: 1.8;

			.lable {
				width: 140rpx;
				color: #999;
				font-size: 28rpx;
				flex: 0 0 auto;
			}

			.value {
				color: #000;
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
			}
		}
	}
</style>